<template>
  <div id="page4">
    <div class="spinner" v-show="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>      
    <p class="infoP" v-show="infoP">服务区列表</p>     
    <mt-loadmore :top-method="loadTop" ref="loadmore">
      <div class="hcontent" v-for="(item,i) in HContent" :key="i" @click="bill('/Service',item.SERVERPART_ID)">
        <p class="contentName">{{item.STATISTICS_DATE | dateTime}}</p>
        <p class="contentState">{{item.TREATMENT_MARK | dateStateto}}</p>
        <br />
        <div>
          <span class="L-icon">L</span>
          <span class="contentText">{{item.SERVERPART_NAME | dateEmpty}}</span>
        </div>
        <br />
        <div>
          <span class="G-icon"></span>
          <span class="content-span">结账金额：{{item.CASHPAY | ComMoney2}} 元</span>
        </div>        
        <div>
          <span class="R-icon"></span>
          <span class="content-span">结账时间：{{item.ENDACCOUNT_DATE | dateEmpty}}</span>
        </div>
      </div>      
      <div class="content" v-for="(item,i) in List" :key="i" @click="bill('/Service',item.SERVERPART_ID)">
        <p class="contentName">{{item.STATISTICS_DATE | dateTime}}</p>
        <p class="contentState">{{item.TREATMENT_MARK | dateStateto}}</p>
        <br />
        <div>
          <span class="L-icon">L</span>
          <span class="contentText">{{item.SERVERPART_NAME | dateEmpty}}</span>
        </div>
        <br />
        <div>
          <span class="G-icon"></span>
          <span class="content-span">结账金额：{{item.CASHPAY | ComMoney2}} 元</span>
        </div>
        <div>
          <span class="R-icon"></span>
          <span class="content-span">结账时间：{{item.ENDACCOUNT_DATE | dateEmpty}}</span>
        </div>        
      </div>   
    </mt-loadmore>   
    <div class="loadPull" v-show="loadPullS">
      <mt-spinner type="fading-circle" v-show="!loadPullD"></mt-spinner>
      <p v-show="loadPullD">{{loadPullText}}</p>
    </div>  
    <img src="../../../static/img/page/youpinMenu.png" width="5%" alt="" class="screenMenu" @click="popupVisible=true">   
    <mt-popup v-model="popupVisible" position="right" class="screen">
      <div class="screenDiv">
        <p>处理状态</p>
        <div>
          <div class="typeDIV" :class="{'press':item.act}" v-for="(item,i) in states" :key="i" v-show="item.show" @click="conditionState(item)">{{item.name}}</div>     
          <br />
        </div>
        <hr />   
        <p>时间选择</p>
        <div class="typeDIV2" @click="openPicker">{{dateQtext}}</div>     
        <div class="line"></div>     
        <div class="typeDIV2" @click="openPicker2">{{dateJtext}}</div>     
      </div>
      <div class="screenButtonDiv">
        <div class="screenButton bu1" @click="reset()">重置</div>
        <div class="screenButton bu2" @click="search()">完成</div>
      </div>
    </mt-popup>   
    <mt-datetime-picker ref="picker" @confirm="handleConfirm" type="date" v-model="dateQ" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日">
    </mt-datetime-picker>   
    <mt-datetime-picker ref="picker2" @confirm="handleConfirm2" type="date" v-model="dateJ" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日">
    </mt-datetime-picker>   
    <!-- 查询动画 -->
    <div class="trialani" v-show="trialani">
      <img :src="trialImg" alt="" width="45%">
      <p v-text="trialtext"></p>
    </div>
    <!-- end -->       
  </div>
</template>

<script>
import store from "@/store/store.js";
import { getDay } from "@/util/publicJS.js";
import { Loadmore, Spinner } from "mint-ui";
import trialImg from "../../../static/img/BusinessSub/33.png";
import trialImgF from "../../../static/img/BusinessSub/completeF.gif";
export default {
  name: "page4",
  data() {
    return {
      Url:
        "http://cloud.eshangtech.com:6060/MobileServicePlatform/Handler/handler_ajax.ashx?",
      Content: [],
      HContent: [],
      spinner: true,
      infoP: false,
      popupVisible: false,
      stateSTR: [],
      states: [
        {
          name: "待处理",
          value: "1",
          act: false,
          show: true
        },
        {
          name: "待审核",
          value: "2",
          act: false,
          show: true
        },
        {
          name: "主任确认",
          value: "3",
          act: false,
          show: true
        },
        {
          name: "已审结",
          value: "4",
          act: false,
          show: true
        }
      ],
      dateQ: "",
      dateQtext: "开始时间",
      dateQstr: "",
      dateJ: "",
      dateJtext: "结束时间",
      dateJstr: "",
      trialImg: "../../../static/img/BusinessSub/33.png",
      trialImgF: "../../../static/img/BusinessSub/completeF.gif",
      trialani: false,
      trialtext: "",
      sortz: "press",
      sortd: "",
      List: [],
      loadPullText: "",
      loadPullS: false,
      loadPullD: false,
      Loading: true
    };
  },
  methods: {
    bill: function(val, id) {
      // console.log(id);
      if (val === "/Service") {
        this.$router.push({ path: "/Homepage/Service" + "/" + id });
      }
    },
    // 获取服务区
    getRecord: function() {
      let date = getDay(-1, "/");
      if (store.state.date != "" && store.state.date != "null") {
        date = store.state.date;
      }
      this.$http
        .get(
          this.Url +
            "action_type=GetEndaccountListByOpenid&action_data=" +
            store.state.openid +
            "&action_record=" +
            date +
            "&Treatment_Mark="
        )
        .then(response => {
          // success callback
          if(response.data.EndaccountList){
            response.data.EndaccountList.forEach(val => {
              if (store.state.fwqId == val.SERVERPART_ID) {
                this.HContent.push(val);
              } else {
                this.Content.push(val);
              }
            });
          }
          let last = this.List.length - 1;
          for (let i = 1; i <= 10; i++) {
            if (last + i <= this.Content.length - 1) {
              this.List[last + i] = this.Content[last + i];
            } else {
              this.loadPullText = "加载完毕";
              this.loadPullD = true;
            }
          }
          this.spinner = false;
          this.infoP = true;
          this.loadPullS = true;
          this.Loading = true;
          // console.log(response);
        })
        .catch(error => {
          // console.log(error);
        });
    },
    // 下拉刷新
    loadTop: function() {
      this.HContent = [];
      this.Content = [];
      this.List = []; // 初始化10条
      this.spinner = true;
      this.infoP = false;
      this.loadPullS = false;
      this.loadPullD = false;
      this.getRecord();
      this.$refs.loadmore.onTopLoaded();
    },
    // 上拉加载
    handleScroll: function() {
      let scrollTop = window.scrollY; // 滚动条在Y轴上的滚动距离
      let scrollHeight = document.body.scrollHeight; // 内容可视区域的高度加上溢出（滚动）的距离。
      let windowHeight = window.innerHeight; // 内容可视区域的高度。
      // console.log(scrollTop);
      // console.log(scrollHeight);
      // console.log(windowHeight);
      if (
        scrollTop + windowHeight === scrollHeight &&
        this.Loading == true &&
        this.loadPullD == false
      ) {
        this.Loading = false;
        this.spinner = true;
        this.infoP = false;
        setTimeout(() => {
          let last = this.List.length - 1;
          for (let i = 1; i <= 10; i++) {
            if (last + i <= this.Content.length - 1) {
              this.List[last + i] = this.Content[last + i];
            } else {
              this.loadPullText = "加载完毕";
              this.loadPullD = true;
            }
          }
          this.spinner = false;
          this.infoP = true;
          this.Loading = true;
        }, 500);
      }
    },
    openPicker: function() {
      this.$refs.picker.open();
    },
    handleConfirm: function() {
      let q = new Date(this.dateQ.toString());
      q = q.getFullYear() + "/" + (q.getMonth() + 1) + "/" + q.getDate();
      if (q == "NaN/NaN/NaN") {
        this.dateQtext = "开始时间";
        q = "";
      } else {
        this.dateQtext = q;
      }
      this.dateQstr = q;
      // console.log(this.dateQstr);
    },
    openPicker2: function() {
      this.$refs.picker2.open();
    },
    handleConfirm2: function() {
      let j = new Date(this.dateJ.toString());
      j = j.getFullYear() + "/" + (j.getMonth() + 1) + "/" + j.getDate();
      if (j == "NaN/NaN/NaN") {
        this.dateJtext = "结束时间";
        j = "";
      } else {
        this.dateJtext = j;
      }
      this.dateJstr = j;
      // console.log(this.dateJstr);
    },
    // 重置
    reset: function() {
      this.stateSTR = [];
      this.dateQstr = "";
      this.dateJstr = "";
      this.dateQtext = "开始时间";
      this.dateJtext = "结束时间";
      this.states.forEach(val => {
        val.act = false;
      });
    },
    // 搜索
    search: function() {
      // console.log(this.stateSTR.toString());
      // console.log(this.dateQstr);
      // console.log(this.dateJstr);
      this.loadPullText = "";
      this.spinner = true;
      this.infoP = false;
      this.HContent = [];
      this.Content = [];
      this.loadPullD = true;
      this.List = [];
      this.popupVisible = false;
      let date = getDay(-1, "/");
      if (this.dateQstr == "" && this.dateJstr == "") {
        if (store.state.date != "" && store.state.date != "null") {
          this.dateQstr = store.state.date;
          this.dateJstr = store.state.date;
        } else {
          this.dateQstr = date;
          this.dateJstr = date;
        }
      } else if (this.dateQstr == "" && this.dateJstr != "") {
        this.dateQstr = this.dateJstr;
      } else if (this.dateQstr != "" && this.dateJstr == "") {
        this.dateJstr = this.dateQstr;
      }
      this.$http
        .get(
          this.Url +
            "action_type=GetEndaccountListByOpenid&action_data=" +
            store.state.openid +
            "&action_record=" +
            this.dateQstr +
            "," +
            this.dateJstr +
            "&Treatment_Mark=" +
            this.stateSTR.toString()
        )
        .then(response => {
          // success callback
          response.data.EndaccountList.forEach(val => {
            this.Content.push(val);
          });
          if (this.Content.length == 0) {
            this.trialani = true;
            this.trialImg = trialImgF;
            this.trialtext = "无业务记录";
            setTimeout(() => {
              this.trialani = false;
              this.trialImg = trialImg;
            }, 2000);
          }
          this.loadPullD = false;
          let last = this.List.length - 1;
          for (let i = 1; i <= 10; i++) {
            if (last + i <= this.Content.length - 1) {
              this.List[last + i] = this.Content[last + i];
            } else {
              this.loadPullText = "加载完毕";
              this.loadPullD = true;
            }
          }
          this.spinner = false;
          this.infoP = true;
          this.loadPullS = true;
          this.Loading = true;
          // console.log(response);
        })
        .catch(error => {
          // console.log(error);
        });
    },
    conditionState: function(item) {
      item.act = !item.act;
      if (item.act == true) {
        this.stateSTR.push(item.value);
      } else {
        let i = -1;
        this.stateSTR.forEach(val => {
          i++;
          if (item.value == val) {
            // console.log(i);
            this.stateSTR.splice(i, 1);
          }
        });
      }
      // console.log(this.stateSTR.toString());
    }
  },
  created() {
    let myDate = new Date();
    if (store.state.date != "" && store.state.date != "null") {
      this.dateQ = store.state.date;
      this.dateJ = store.state.date;
    } else {
      this.dateQ = myDate;
      this.dateJ = myDate;
    }
    this.getRecord();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  }
};
</script>

<style scoped>
.infoP {
  color: #b7b8ba;
  padding: 3.5rem 0.5rem 0.5rem 0.5rem;
}
.content {
  width: 95%;
  padding: 0.75rem;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: 0px 1px 8px 0.2px #e2e2e2;
  font-size: 14px;
  margin-bottom: 0.5rem;
}
.hcontent {
  width: 95%;
  padding: 0.75rem;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: 0px 1px 8px 0.2px #e2e2e2;
  font-size: 14px;
  margin-bottom: 0.5rem;
  border: 1px solid #4a4c5b;
}
.contentName {
  width: 7.5rem;
  float: left;
}
.contentState {
  float: right;
  margin-bottom: 0.75rem;
}
.L-icon {
  display: block;
  float: left;
  background-color: #9c9c9c;
  width: 0.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  border-radius: 0.5rem;
  text-align: center;
  color: #fff;
  margin: 0.25rem 0.25rem 0 0;
}
.contentText {
  display: block;
  float: left;
  color: #636363;
}
.G-icon {
  display: block;
  float: left;
  background-color: #44bea3;
  width: 0.35rem;
  height: 0.35rem;
  line-height: 0.35rem;
  border-radius: 0.35rem;
  margin: 0.25rem 0.4rem 0 0.075rem;
}
.R-icon {
  display: block;
  float: left;
  background-color: #fc9153;
  width: 0.35rem;
  height: 0.35rem;
  line-height: 0.35rem;
  border-radius: 0.35rem;
  margin: 0.25rem 0.4rem 0 0.075rem;
}
.content-span {
  color: #636363;
}
.loadPull {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}
.screenMenu {
  position: fixed;
  top: 3.5rem;
  right: 0.5rem;
}
.screen {
  width: 72%;
  height: 100%;
  background-color: #fff;
}
.screenDiv {
  padding: 0.75rem;
  color: #999;
}
.screenDiv p {
  margin-bottom: 0.2rem;
}
.typeDIV {
  width: 3.5rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 0.15rem;
  background-color: #f2f2f2;
  float: left;
  margin: 0.2rem 0.2rem 0.4rem 0.2rem;
}
.typeDIV2 {
  width: 4.6rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 0.15rem;
  background-color: #4a4c5b;
  color: #f2f2f2;
  float: left;
  margin: 0.2rem 0.2rem 0.4rem 0.2rem;
}
.press {
  background-color: #ec9061;
  color: #fff;
}
.date {
  width: 5rem;
  height: 2rem;
  border-radius: 0.15rem;
  padding-left: 0.2rem;
  border: 1px solid #999;
  float: left;
  color: #413e3e;
}
.line {
  width: 1.2rem;
  margin: 1rem 0.2rem 0 0.2rem;
  border-top: 1px solid #999;
  float: left;
}
.screenButtonDiv {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  position: fixed;
  bottom: 0;
}
.screenButton {
  width: 50%;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  float: left;
}
.bu1 {
  background-color: #f2f2f2;
  color: #4a4c5b;
}
.bu2 {
  background-color: #4a4c5b;
  color: #fff;
}
.trialani {
  width: 10rem;
  height: 6rem;
  box-shadow: 0px 1px 8px 0.2px #e2e2e2;
  text-align: center;
  background-color: #fff;
  position: fixed;
  top: 42%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
</style>

